<template>
	<el-card style="padding: 0; margin: 0 auto; width: 1200px; position: relative; top: 60px">
		<!--第一行返回页-->
		<el-page-header @back="$route.go(-1)">
			<template #content>
				<h1>{{ form.name }}</h1>
			</template>

			<template #extra>
				<div>
					<el-button v-if="!form.isCollect" circle :icon="Star" type="primary" @click="handleCollet"></el-button>
					<el-button v-if="form.isCollect" circle :icon="Star" type="warning" @click="handleCollet"></el-button>
				</div>
			</template>
		</el-page-header>

		<!--    第三行详情页-->
		<el-link type="info">{{ form.des }}</el-link>

		<div v-html="form.content"></div>
	</el-card>
</template>

<script setup>
import { onBeforeMount, reactive, ref } from 'vue'

const $route = router
const systemStore = useSystemStore()
const form = reactive({
	id: undefined,
	name: undefined,
	cid: undefined,
	img: undefined,
	file: undefined,
	des: undefined,
	content: undefined
})
import { Delete, Download, PieChart, Star, View } from '@element-plus/icons-vue'
import router from '@/router'
import request from '@/utils/request'
import useSystemStore from '@/stores/system'
import { ElMessage } from 'element-plus'

const aid = ref('')
onBeforeMount(async () => {
	if ($route.currentRoute.value.query.id) {
		aid.value = $route.currentRoute.value.query.id
		await load()
	}
})
const handleCollet = async () => {
	const entity = {}
	entity.aid = form.id
	const res = await request.post(`/collect`, entity)
	ElMessage({
		message: `${res.data}`,
		type: 'success',
		showClose: true
	})
	await load()
}
const load = async () => {
	const res = await request.get(`/teach/${$route.currentRoute.value.query.id}`)
	Object.assign(form, res.data)
}
</script>

<style scoped lang="scss">
.field {
	margin-bottom: 16px; /* 每个字段之间的间距 */
}

.text-limit {
	max-height: 48px; /* 设置固定高度（2行，假设每行24px） */
	line-height: 24px; /* 行高 */
	overflow: hidden; /* 超出部分隐藏 */
	display: -webkit-box; /* 支持多行显示 */
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; /* 限制为最多两行 */
	color: #666; /* 可以根据需要调整字体颜色 */
}
</style>
